<template>
  <div 
    class="vk-collapse-item"
    :class="{
      'is-disabled': disabled
    }"
  >
  <!-- 标题-->
  <div 
    class="vk-collapse-item__header" 
    :class="{
     'is-disabled': disabled,
     'is-active': isActive
    }"
    :id="`item-header-${name}`" 
    @click="handlechick">
    <!-- 如果父组件没有为 title 插槽提供内容，则会回退到默认值 {{title}} -->
    <slot name="title">{{title}}</slot> 
    <Icon icon="angle-right" class="header-angle" />
  </div>

  <!-- 内容 -->
  <Transition name='slide' v-on="transitionEvents">
    <div class="vk-collapse-item__wrapper" v-show="isActive">
      <div class="vk-collapse-item__content" :id="`item-content-${name}`" >
        <slot></slot>
      </div>
    </div>
  </Transition>  
    
  </div>
</template> 





<script setup lang="ts">
import { inject,computed } from 'vue'
import type {CollapseItemProps} from './types.ts'
import {collapseContextKey } from './types.ts'
import Icon from '../Icon/IconMain.vue'

defineOptions({
  name: 'VkCollapseItem',
});

const props=defineProps<CollapseItemProps>();
const collapseContext = inject(collapseContextKey)

const isActive = computed(()=>collapseContext?.activeNames.value.includes(props.name))

const handlechick = ()=>{
  // 如果当前项是禁用状态，则不执行任何操作
  if(props. disabled) { return }
  collapseContext?. handleItemClick(props.name)
}

const transitionEvents: Record<string,(el:HTMLElement)=>void> = {
  beforeEnter(el) {
    el.style.height ='0px'
    el.style.overflow= 'hidden'
  },
  enter(el) {
     el.style.height =`${el.scrollHeight}px`
  },
  afterEnter(el){
     el.style.height =''
     el.style.overflow= ''
  },
  beforeLeave(el) {
    el.style.height=`${el.scrollHeight}px`
    el.style.overflow= 'hidden'
  },
  leave (el) {
    el.style.height = '0px'
  },
  afterLeave (el) {
    el.style.height=''
    el.style.overflow= ''
  }
}

</script>

<style>

</style>